<template>
    <view class="container">
        <!-- 话题标签区 -->
        <view class="content-top">
            <scroll-view class="scroll-view_H" scroll-x="true">
                <view
                    v-for="(item, index) in tags"
                    :key="item.category_id"
                    class="scroll-view-item_H"
                    :class="{ 'scroll-view_H-action': params.category_id === item.category_id }"
                    @click="changeTag(item.category_id)"
                    >{{ item.category_title }}</view
                >
            </scroll-view>
            <view class="f f-bt mt-20 pt-20 pb-10">
                <view class="f">
                    <view
                        class="fs-32"
                        :class="{ 'text-blue-500': params.sort_type === 0 }"
                        @click="params.sort_type = 0"
                        >最新</view
                    >
                    <view
                        class="fs-32 ml-20"
                        :class="{ 'text-blue-500': params.sort_type === 1 }"
                        @click="params.sort_type = 1"
                        >最热</view
                    >
                </view>
            </view>
        </view>
        <!-- 内容卡片列表 -->
        <scroll-view
            class="card-list"
            scroll-y
            refresher-enabled
            :refresher-triggered="triggered"
            @scrolltolower="getArticleList(true)"
            @refresherrefresh="getArticleList(false)"
        >
            <view
                v-for="(article, index) in articles"
                :key="index"
                class="bg-white rounded-xl shadow-sm overflow-hidden articles-item"
                @click="articleDetail(article.article_id)"
            >
                <view class="p20">
                    <view class="flex items-start" style="display: flex">
                        <view
                            class="w-16 h-16 rounded-lg overflow-hidden mr-3 mr-30 f-col f-c"
                            style="width: 100rpx"
                        >
                            <image
                                :src="article.article_thumb"
                                class="w-full h-full object-cover"
                                style="width: 100rpx; height: 100rpx"
                                mode="aspectFill"
                            />
                        </view>
                        <view class="flex-1">
                            <view class="fs-30 fw-b">{{ article.article_title }}</view>
                            <view class="fs-24 mt-10 mb-10 color-gray line2">
                                {{ article.article_describe }}
                            </view>
                            <view class="f">
                                <text class="fs-24 mr-30 color-gray"
                                    ><uni-icons
                                        type="eye-filled"
                                        color="#6b7280"
                                        size="14"
                                    ></uni-icons
                                    >{{ article.article_views }}</text
                                >
                                <text class="fs-24 color-gray"
                                    ><uni-icons
                                        type="hand-up-filled"
                                        color="#6b7280"
                                        size="14"
                                    ></uni-icons
                                    >{{ article.article_likes }}</text
                                >
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 加载状态提示 -->
            <view class="loading-more" v-if="isLoading">
                <text>加载中...</text>
            </view>
            <view class="no-more" v-if="!hasMore && articles.length > 0">
                <text>没有更多数据了</text>
            </view>
            <view class="empty-tip" v-if="!isLoading && articles.length === 0">
                <text>暂无视频数据</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { getCategoryList, getArticleList } from '@/api/modules/common';
export default {
    data() {
        return {
            page: 1,
            pageSize: 10,
            total: 0,
            triggered: false,
            keywords: '',
            loading: 'more',
            cardList: [],
            activeTag: 0,
            activeTab: 0,
            tags: [],
            articles: [],
            isLoading: false,
            hasMore: true,
            total: 0,
            params: {
                category_id: '',
                sort_type: 0,
                page_no: 1,
                page_size: 20
            }
        };
    },
    onLoad() {
        this.getCategoryList();
    },
    methods: {
        async getCategoryList() {
            const { data } = await getCategoryList();
            this.tags = data;
            this.params.category_id = data[0]?.category_id || 0;
            this.getArticleList(false);
        },
        async getArticleList(loadMore = false) {
            if (!loadMore) {
                // 非加载更多时，重置页码
                this.params.page_no = 1;
                this.articles = [];
                this.hasMore = true;
                this.triggered = true;
            }

            if (!this.hasMore || this.isLoading) return;

            this.isLoading = true;

            try {
                const { data } = await getArticleList(this.params);
                const { total, list } = data;

                // 更新总数
                this.total = total;

                // 追加数据
                this.articles = [...this.articles, ...list];

                // 判断是否还有更多数据
                this.hasMore = this.articles.length < total;

                // 页码加1，为下次加载做准备
                if (this.hasMore) {
                    this.params.page_no++;
                }
            } catch (error) {
                console.error('获取文章列表失败:', error);
                uni.showToast({
                    title: '获取文章列表失败',
                    icon: 'none'
                });
            } finally {
                this.isLoading = false;
                this.triggered = false;
                uni.stopPullDownRefresh();
            }
        },
        changeTag(index) {
            this.params.category_id = index;
            this.getArticleList(false);
        },
        articleDetail(article_id) {
            uni.navigateTo({
                url: `/pages/news-detail/news-detail?article_id=${article_id}`
            });
        }
    }
};
</script>

<style>
.loading-more,
.no-more,
.empty-tip {
    text-align: center;
    padding: 20rpx 0;
    color: #999;
    font-size: 28rpx;
}
page {
    background: rgb(239, 246, 255, 0.5);
}

.container {
    padding: 20rpx 30rpx;
    padding-top: 0;
}

.content-top {
    position: fixed;
    background-color: rgb(239, 246, 255);
    z-index: 9;
    top: 0;
    padding-top: 20rpx;
}

.scroll-view_H {
    white-space: nowrap;
    width: 100%;
}

.scroll-view-item_H {
    display: inline-block;
    width: 180rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 26rpx;
    border-radius: 60rpx;
    background-color: #fff;
    margin-right: 10rpx;
    font-weight: 500;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.scroll-view_H-action {
    background-color: rgb(59, 130, 246);
    color: #fff;
}

.text-blue-500 {
    color: rgb(59, 130, 246);
    font-weight: 500;
}

.card-list {
    margin-top: 160rpx;
}

.articles-item {
    background-color: #fff;
    border-radius: 20rpx;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
        var(--tw-shadow);
    margin-top: 20rpx;
}

.color-gray {
    color: #6b7280;
}

.line2 {
    height: 64rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
